<template>
  <!-- 后台广告推荐页面 -->
  <div>
    <h2>推荐添加页面</h2>
    <br />
    <el-form ref="form" :model="Recommend" label-width="120px">
      <el-form-item label="推荐名称">
        <el-input v-model="Recommend.name" style="max-width: 260px"></el-input>
      </el-form-item>

      <el-form-item label="推荐类型" v-if="!createNewType">
        <el-select
          v-model="Recommend.type"
          placeholder="不同的类型决定展示位置"
        >
          <el-option
            v-for="type of types"
            :key="type"
            :label="type"
            :value="type"
          ></el-option>
        </el-select>
        <el-button @click="createNewType = true">+</el-button>
      </el-form-item>

      <el-form-item label="新的类型" v-else>
        <el-input
          v-model="Recommend.type"
          style="max-width: 210px"
          maxlength="10"
          show-word-limit
        ></el-input>
        <el-button @click="createNewType = false">-</el-button>
      </el-form-item>

      <el-form-item label="推荐所属区域">
        <el-radio-group v-model="Recommend.region">
          <el-radio label="站内"></el-radio>
          <el-radio label="站外"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="搜索书籍名:" v-if="Recommend.region == '站内'">
        <el-input
          type="input"
          v-model="SearchBox"
          style="max-width: 210px"
        ></el-input>
        <el-button v-on:click="getBookVoList(SearchBox)">搜索</el-button>
        <br />
      </el-form-item>

      <el-form-item label="选择中的书籍:" v-if="Recommend.body">
        {{ Recommend.body }}
      </el-form-item>

      <el-form-item label="完整http地址:" v-if="Recommend.region == '站外'">
        <el-input type="input" v-model="Recommend.body"></el-input>
      </el-form-item>

      <el-table
        :data="bookVoList"
        ref="multipleTable"
        highlight-current-row
        @current-change="handleCurrentChange"
        v-if="Recommend.region == '站内' && bookVoList.length > 0"
        style="width: 100%"
      >
        <el-table-column prop="id" label="id"> </el-table-column>
        <el-table-column prop="bookName" label="书" width="180">
        </el-table-column>
        <el-table-column prop="writerName" label="作者" width="180">
        </el-table-column>
        <el-table-column prop="writerEmail" label="邮箱"> </el-table-column>
      </el-table>

      <el-form-item label="展示内容">
        <el-upload
          ref="imgfile"
          :on-change="uploadChange"
          :on-success="success"
          :action="httpUrl"
          :show-file-list="false"
          :auto-upload="false"
          :data="Recommend"
          name="file"
        >
          <img
            v-if="imageUrl"
            :src="imageUrl"
            fit="cover"
            style="width: 350px; height: 200px"
          />
          <el-button v-else>+</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="推广文案">
        <el-input
          v-model="Recommend.copywriting"
          style="max-width: 260px"
          maxlength="30"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit()">立即提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-carousel :interval="5000" arrow="always" style="width: 100%">
      <el-carousel-item v-for="(item, key) in RecommendList" :key="key">
        <h3 style="font-size:20px">{推广类型:{{item.region}},广告类型:{{item.type}},名称:{{item.name}},文案:{{item.copywriting}}}</h3>
        <el-button @click="del(item.id)">删除</el-button>
        <el-image v-if="item.imgUrl" :src="item.imgUrl" fit="cover" style="height:100%;width: 100%"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getAllBodyListByKey, getBookVoList, getAllType,adminGg,getAllRecommendByType,delKey } from "@/api";

export default {
  name: "NovelAdmin",
  data() {
    return {
      //新的类型
      createNewType: false,
      //请求url
      httpUrl: "http://localhost:8001/api/admin/img",
      //选中的图片
      imageUrl: "",
      //上传时附带的数据
      Recommend: {
        name: "", //推荐标题名
        type: "", //推荐的类型（小说 网页游戏）
        region: "站外", //推荐类型 站外/站内
        body: "", //推荐的内容（站内：书籍id 站外：外站的地址）
        copywriting: "", //推广文案
      },
      //已有类型,供选择框选中
      types: ["小说", "页游"],
      //查询到的书籍信息集合
      bookVoList: {},
      //搜索时的输入
      SearchBox: "",
      //推荐的内容集合
      RecommendList: {},
    };
  },
  watch: {
    // 'form.resource': {
    //   handler(val, oldVal) {
    //     //val新值,oldVal旧值
    //     // alert(val + oldVal)
    //   }
    // }
  },
  methods: {
    del(key){
      delKey(key).then(({data}) => {
        console.log(data,"删除");
      }).catch((err) => {
        
      });
    },
    //选中书籍后
    handleCurrentChange(val) {
      console.log("选中的书籍", val);
      this.Recommend.body = val.id;
    },
    success(response){
      console.log(response,"----------");
      let obj = response;
      if(obj.code == 0){
        this.$message.success("提交成功");
        this.getAllBodyListByKey();
      }else{
        this.$message.error("提交失败");
      }
     
      // this.imageUrl = "";
      
    },
    /**
     * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     */
    uploadChange(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //提交
    onSubmit() {
      if (this.imageUrl) {
        this.$refs.imgfile.submit();
      } else {
        console.log("oojjooojjjo")
        adminGg(this.Recommend)
          .then(({ data }) => {
            if (data.code == 0) {
              this.$message.success("修改成功");
            } else {
              this.$message.success("修改失败");
            }
          })
          .catch((err) => {});
      }
    },

    //搜索
    getBookVoList(inputv) {
      getBookVoList(inputv)
        .then((res) => {
          this.bookVoList = res.data;
        })
        .catch((err) => alert(err));
    },
    getAllBodyListByKey() {
      if(!this.Recommend.type){
        getAllBodyListByKey()
          .then(({data}) => {
            console.log(data)
            this.RecommendList = data.data;
          })
          .catch((err) => alert(err));
      }else{
        getAllRecommendByType(this.Recommend.type).then(({data}) => {
          console.log(data)
          this.RecommendList = data.data;
        }).catch((err) => {
          
        });
      }

    },
  },
  created() {
    this.getAllBodyListByKey();
    // this.getVerificationCode();
    getAllType()
      .then(({ data }) => {
        this.types = data.data;
      })
      .catch((err) => {});
  },
  watch:{
    "Recommend.type": {
      deep: true, //不设置，a改变时watch无法检测到numbers改变
      handler(val, oldVal) {
        this.getAllBodyListByKey();
      },
    },
  }
};
</script>

<style scoped>
</style>